<template>
  <div class="preview">
    <div class="close-icon" @click="$emit('close')">
      <close-outlined style="color: white"/>
    </div>
    <div class="preview-content">
      <img v-if="type === 'image'" :src="url" alt="">
      <video v-if="type === 'video'" :src="url" controls autoplay />
    </div>
  </div>
</template>

<script setup>
import { CloseOutlined } from "@ant-design/icons-vue";

// eslint-disable-next-line no-undef
defineProps({
  type: {
    type: String,
    default: "image",
  },
  url: {
    type: String,
    default: "",
  },
});

// eslint-disable-next-line no-undef
defineEmits(["close"]);
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
